<template>
	<view>
		<uni-list :border="true">
			<!-- 显示圆形头像 -->
			<uni-list-chat :avatar-circle="true" title="uni-app"
				avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
				note="您收到一条新的消息" time="2020-02-02 20:20"></uni-list-chat>
			<!-- 右侧带角标 -->
			<uni-list-chat title="uni-app"
				avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
				note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
			<!-- 头像显示圆点 -->
			<uni-list-chat title="uni-app"
				avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
				note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
			<!-- 头像显示角标 -->
			<uni-list-chat title="uni-app"
				avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
				note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
			<!-- 显示多头像 -->
			<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20"
				badge-positon="left" badge-text="dot"></uni-list-chat>
			<!-- 自定义右侧内容 -->
			<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20"
				badge-positon="left" badge-text="dot">
				<view class="chat-custom-right">
					<text class="chat-custom-text">刚刚</text>
					<!-- 需要使用 uni-icons 请自行引入 -->
					<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
				</view>
			</uni-list-chat>
		</uni-list>
	</view>
</template>

<script>
</script>

<style>
	page {
	  background-color: #f8f8f8;
	}
	
	.help-container {
	  margin-bottom: 100rpx;
	  padding: 30rpx;
	}
	
	.list-title {
	  margin-bottom: 30rpx;
	}
	
	.childList {
	  background: #ffffff;
	  box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
	  border-radius: 16rpx;
	  margin-top: 10rpx;
	}
	
	.line {
	  width: 100%;
	  height: 1rpx;
	  background-color: #F5F5F5;
	}
	
	.text-title {
	  color: #303133;
	  font-size: 32rpx;
	  font-weight: bold;
	  margin-left: 10rpx;
	
	}
	
	.text-item {
	  font-size: 28rpx;
	  padding: 24rpx;
	}
	
	.question {
	  color: #606266;
	  font-size: 28rpx;
	}
</style>
